<template>
  <div class="RemarkChild">
        <div v-for="(item,index) in remarkChildList" :key="index">
            <div style="margin-bottom: 20px; padding: 20px; background-color: #fff;">
                <div style="display: flex">
                    <div style="width: 8%;">
                        <img :src="item.userHead" alt="" style="width: 40px; height: 40px; border-radius: 50%;">
                    </div>
                    <div style="width: 92%;">
                         <div style="flex: 1;">
                            <span>{{ item.userName}}  <span style="color: green; margin-left: 8px;">@</span>{{ item.replyName }}</span>
                        </div>
                    <div style="flex: 1; margin-top: 8px;">
                        <button class="reply2" @click="parent_reply2(index)"><i class="el-icon-edit-outline"></i>回复</button>
                        <span style="font-size: 8px;">{{item.createTime}}</span>
                    </div>
                    <div style="flex: 1; margin-top: 8px;">
                         <span>{{ item.remarkContent}}</span>
                    </div>
                </div>  
                </div> 
                <div style="margin-bottom: 50px;" v-if="isreply[index]">
                <div style="flex: 1; margin-bottom: 20px;">
                        <button @click="notreply2(index)" style="margin-left: 100px; width:65px; height: 24px; background-color: red; border: 0px; border-radius: 5px; color: #fff;"><p style="font-size: 3px;">X 取消评论</p></button>
                    </div>
                    <input type="text" style="margin-left: 75px; width: 70%; height: 50px;" v-model="replyContent">
                    <button   @click="SubmitComment2(item.parentId,item.userName,index)" style="width: 60px; height: 40px; color: #fff; background-color: aqua; border: 0px; margin-left: 40px;">提交评论</button>
                </div>
            
        </div>
  </div>
  <br>
</div>
</template>

<script>
import axios from 'axios'
export default {
    name: "RemarkChild",
    props:{
        remarkChild :Array,
        blogId:String,
    },
    data(){
        return{
            remarkChildList:this.remarkChild,
            isreply:[],
            replyContent:"",
        }
    },
    mounted:function(){
        this.initchildreply2()
    },  
    methods:{
        initchildreply2(){
            for(var i=0;i<this.remarkChild.length;i++){
                this.isreply.push(false)
            }
        },
        parent_reply2(index){
            this.$set(this.isreply,index,true)
        },
        notreply2(index){ 
            this.$set(this.isreply,index,false)
            this.replyContent="";
        },
        SubmitComment2(parentId,userName,index){
            axios.post("/SubmitComment", {
                remarkId: parentId,
                userName:userName,
                replyContent:this.replyContent,
                blogId:(this.blogId-0),
                user_token : localStorage.getItem("user_Token"),
            }).then(response=>{
                this.remarkChildList.push(response.data)
                this.$set(this.isreply,index,false)
                this.replyContent="";
                })
        }
    }
}
</script>

<style>
    .RemarkChild{
        width: 88%;
    }
    .reply2{
        color: #fff;
        background-color: #1AB667;
        border: 0px;
        width: 43px;
        height: 20px;
        margin-right: 30px;
        border-radius: 5px;
    }
</style>